<template>
    <section>
        <!--工具条/搜索框-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <!--inline:行内表单样式  model:表单数据对象-->
            <el-form :inline="true" :model="filters">
                <el-form-item label="维修员" prop="role_id">
                    <el-select v-model="filterss.username" placeholder="请选择维修员">
                        <el-option
                                v-for="item in list_repair"
                                :key="item.id"
                                :label="item.username"
                                :value="item.username">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getEmperor">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="ordes" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column type="index" width="60"></el-table-column>

            <el-table-column prop="repairname" label="维修员"  sortable></el-table-column>

            <el-table-column prop="customer" label="客户姓名"  sortable></el-table-column>

            <el-table-column prop="description" label="故障说明"  sortable></el-table-column>

            <el-table-column prop="is_finish" label="维修状态"  sortable></el-table-column>

            <el-table-column prop="create_time" label="时间" :formatter="formatDate"  sortable></el-table-column>

            <el-table-column label="操作" width="200" >
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!--修改的时候 弹出 编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editMaintainForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="客户姓名" prop="customer">
                    <el-input v-model="editMaintainForm.customer" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="维修状态" prop="is_finish">
                    <el-select v-model="editMaintainForm.is_finish" placeholder="请选择维修状态">
                        <el-option
                                v-for="item in is_finishs"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div>
                <tree-transfer :title="title" :from_data='fromData' :to_data='toData':defaultProps="{label:'label'}"
                               @addBtn='add' @removeBtn='remove' :mode='mode' height='400px' filter openAll
                                   >
                </tree-transfer>
                </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>



        <!--分页工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import treeTransfer from 'el-tree-transfer' // 引入
    export default {
        data() {
            return {
                filters:{
                    name:'', //搜索框默认为空
                },
                currentPage:1,//默认第一页
                total:0,// 默认0条数据
                sels: [],//列表选中列
                title: "总用",//列表选中列
                ordes:[], //所有维修单

                is_finish:[],//所有维修状态

                listLoading:false,//如果等于false 现在加载中效果
                editLoading:false,//修改加载中
                editFormVisible:false,//默认不显示对话框
                //修改维修单
                editMaintainForm:{
                    id:0,
                    name:"",
                    message:"",
                    customer:"",
                    customer_id:0,
                    repair_id:"",
                    after_seller_id:"",
                    description:"",
                    is_finish:0,
                    send_car:true,
                },//修改form对象
                list_repair:[],//所有维修员的信息
                is_finishs:[],//所有维修的状态

                editFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }//required 必填的意思
                    ]
                },
                filterss:{
                    username:'' //搜索框默认为空
                },
                mode: "transfer", // transfer addressList

                fromData:[],//所有的菜单

                fromDatas:[],//所有的菜单复制

                toData:[],//转移的数据

                arrid:[],//添加的材料ID

                etail:[{
                    order_id:0,
                    is_finish:0,
                    arrid:{},
                    after_seller_id:0,
                    customer_id:0
                }],//添加的明细传值内容
            }
        },
        methods: {


            //分页工具条方法
            handleCurrentChange(val){
                //当前页
                this.currentPage = val;
                this.getEmperor();
            },
            //时间格式化
            formatDate(row, column, cellValue) {
                return this.dateHandle(new Date(cellValue));
            },
            dateHandle(time){
                var year=time.getFullYear();
                var month=time.getMonth()+1;
                var date=time.getDate();
                var hour=time.getHours();
                var minute=time.getMinutes();
                var second=time.getSeconds();
                return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
            },
            //前往指定页
            handleCurrentChange(val){
                this.currentPage = val;
                this.getEmperor();
            },
            //查询所有的维修单
            getEmperor(){
                //发送axios请求到后端 查询客户
                // http://localhost:80/emperor/list
                let param = {
                    name:this.filterss.username,
                    currentPage: this.currentPage,

                }
                this.$http.patch('/order/queryPage',param).then(res =>{
                    console.debug("111111111111111111");
                    console.debug(res.data.rows);
                    for(var i = 0;i < res.data.rows.length;i++){
                        if(res.data.rows[i].is_finish == 0){
                            res.data.rows[i].is_finish = "未维修";
                        } else if (res.data.rows[i].is_finish == 1){
                            res.data.rows[i].is_finish = "正在维修";
                        } else if (res.data.rows[i].is_finish == 2){
                            res.data.rows[i].is_finish = "维修完毕";
                        }
                    }
                    this.total = res.data.total;
                    this.ordes = res.data.rows;

                })
                //显示维修员
                this.$http.patch('/order/list_repair').then(res =>{
                    this.list_repair = res.data;
                });
            },
            //编辑弹出对话框
            handleEdit(index,row){
                this.$http.patch('/materials/list').then(res =>{
                    this.fromData = res.data;
                    this.fromDatas = res.data;
                });

                this.$http.get('/materials/'+row.id).then(res =>{
                    this.toData = res.data;
                });


                //显示维修状态
                this.$http.get('/dictInfo/queryByType?type=wxzt').then(res =>{

                    this.is_finishs = res.data;
                    for(var i = 0;i < res.data.length;i++){
                        if(res.data[i].name == row.repairname){
                            this.editMaintainForm.is_finish = res.data[i].id;
                        }
                    }
                });
                console.debug(row);

                //回显
                this.editMaintainForm = row;

                //打开修改的对话框
                this.editFormVisible = true;


            },
            //删除方法
            handleDel(index,row){
                let id = row.id;
                this.$http.delete('/customer/'+id).then(res =>{
                    // {isSuccess:true,msg:'xxx'}
                    console.log(res.data);
                    let {success,message} = res.data;
                    if (success){
                        this.$message({
                            message: message,
                            type: 'success'
                        });
                        this.getEmperor();
                    }else{
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }
                })
            },
            //修改保存
            editSubmit(){
                //和新增类似
                //提交之前的验证工作--elementui验证
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            //出现加载中效果
                            this.editLoading = true;
                            //{name:"xxx"}把新增表单里面form 拷贝到 {}

                            if (this.arrid == null){
                                for(var i = 0;i < this.toData.length;i++){
                                    for(var j = 0;j < this.toData[i].children.length;j++){
                                        this.arrid.push(this.toData[i].children[j].id);
                                    }
                                }
                            }

                            if(this.editMaintainForm.is_finish == "未开始"){
                                this.editMaintainForm.is_finish = 0;
                            } else if (this.editMaintainForm.is_finish == "正在维修"){
                                this.editMaintainForm.is_finish = 1;
                            } else if (this.editMaintainForm.is_finish == "维修完毕"){
                                this.editMaintainForm.is_finish = 2;
                            }

                            //去重
                            var temp = [];
                            for(var i = 0; i < this.arrid.length; i++) {
                                //如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
                                if(this.arrid.indexOf(this.arrid[i]) == i){
                                    temp.push(this.arrid[i])
                                }
                            }



                            let para = Object.assign({}, this.editMaintainForm);

                            if(para.is_finish == 11){
                                this.etail.is_finish = 2
                            } else if(para.is_finish == 10){
                                this.etail.is_finish = 1
                            } else if(para.is_finish == 9){
                                this.etail.is_finish = 0
                            } else {
                                this.etail.is_finish = para.is_finish;
                            }

                            this.etail.order_id = para.id;
                            this.etail.arrid = temp;
                            this.etail.after_seller_id = para.after_seller_id;
                            this.etail.customer_id = para.customer_id;

                            let paraa = Object.assign({}, this.etail);
                            console.debug("aaaaaaaaaaaaaaaaaaaaaaaa");
                            console.debug(paraa);

                            this.$http.put('/detail/save',paraa).then((res) => {
                                //去掉转圈圈
                                this.editLoading = false;
                                let {success,message}=res.data;
                                if (success) {
                                    this.$message({
                                        message: message,
                                        type: 'success'
                                    });
                                    //表单清空
                                    this.$refs['editForm'].resetFields();
                                    //关闭对话框
                                    this.editFormVisible = false;
                                    this.getEmperor();
                                }else{
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                }
                            });
                        });
                    }
                });

            },
            //多选方法
            selsChange: function (sels) {
                this.sels = sels;
            },
            // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
            changeMode() {
                if (this.mode == "transfer") {
                    this.mode = "addressList";
                } else {
                    this.mode = "transfer";
                }
            },
            // 监听穿梭框组件添加
            add(fromData,toData,obj){

                this.arrid = [];

                for(var i = 0;i < toData.length;i++){
                    for(var j = 0;j < toData[i].children.length;j++){
                        this.arrid.push(toData[i].children[j].id);
                    }
                }

            },
            // 监听穿梭框组件移除
            remove(fromData,toData,obj){
                // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
                // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

                this.fromData = this.fromDatas;

                this.arrid = [];
                for(var i = 0;i < toData.length;i++){
                    for(var j = 0;j < toData[i].children.length;j++){
                        this.arrid.push(toData[i].children[j].id);
                    }
                }
            },

        },
        mounted() {
            //挂载结束 el:#myDiv 所有vue内容 都渲染到DOM--虚拟DOM
            //发送请求
            this.getEmperor()
        },
        components:{ treeTransfer } ,// 注册

    }
</script>

<style scoped>

</style>